<template>
  <div class="app">
    <el-card shadow="always">
<!--    查询-->
    <el-form :inline="true" :model="ordersearch" class="demo-form-inline">
      <el-form-item label="支付">
        <el-input v-model="ordersearch.payment" placeholder="支付"></el-input>
      </el-form-item >
      <el-form-item label="用户id">
        <el-input v-model="ordersearch.userId" placeholder="用户id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="plain"  @click="search">查询</el-button>
<!--        <el-button type="success"  @click="add">添加</el-button>-->
<!--        <el-button type="danger" @click="handleDelete">批量删除</el-button>-->
      </el-form-item>
    </el-form>
    表格
    <el-table
        :data="OrderList"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
      >
      </el-table-column>
      <el-table-column
          label="orderId"
          align="center"
          prop="orderId">
      </el-table-column>
      <el-table-column
          label="支付"
          align="center"
          prop="payment">
      </el-table-column>
      <el-table-column
          label="支付类型"
          align="center"
          prop="paymentType">
      </el-table-column>
      <el-table-column
          label="创建时间"
          align="center"
          prop="createTime">
      </el-table-column>
      <el-table-column
          label="更新时间"
          align="center"
          prop="updateTime">
      </el-table-column>
      <el-table-column
          label="用户id"
          align="center"
          prop="userId">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    </el-card>
    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      {{order}}
      <el-form :model="order" :rules="rules" ref="ruleForm">
        <el-form-item label="支付"  prop="payment" :label-width="formLabelWidth">
          <el-input v-model="order.payment" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id" prop="userId" :label-width="formLabelWidth">
          <el-input v-model="order.userId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveorder">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script >

import orderapi from "@/api/order"

  export default {
    data(){
      return{
        OrderList: [],
        ordersearch: {},
        order: {},
        page: 1,
        pageSize: 5,
        total: 100,
        title:'修改订单信息',
        formLabelWidth: '100px',
        dialogFormVisible: false,
        ids:[],
        multipleSelection:[], //数组，选中多项


        rules: {
          // id: [
          //   { required: true, message: '请输入学生id', trigger: 'blur' },
          // ],
          payment: [
            {required: true, message: '请输入支付', trigger: 'blur'},
          ],

          userId: [
            {required: true, message: '请输入用户id', trigger: 'blur'},
          ]

        }




      }
    },

    created() {
      // this.findorder();
      this.search()
      // this.findByPage()


    },

    methods:{

      async findorder(){
        const {data:res}=await orderapi.findorder()
        console.log(res)
        if(res.code === 200){
          this.OrderList=res.data;
        }

      },

      async findByPage(){
        const {data:res} = await orderapi.findByPage(this.page,this.pageSize)
        console.log(res)
        if(res.code === 200){
          this.OrderList=res.data.rows
          this.total=res.data.total
        }
      },

      async search(){
        const {data:res} = await orderapi.search(this.page,this.pageSize,this.ordersearch)
        console.log(res)
        if (res.code === 200) {
          this.OrderList = res.data.rows
          this.total = res.data.total
        }

      },

      saveorder(){
        this.$refs.ruleForm.validate(async valid=>{
          let url = "/order/update"
          let method="put"
          if(valid){
            const{data:res}=await orderapi.save(url,method,this.order)
            console.log("res:",res)
            if (res.code === 200) {
              this.$message({
                type:'success',
                message:res.message,
                onClose:() =>{
                  this.dialogFormVisible=false
                  this.search()
                }
              })
            }else{
              this.$message({
                type:'error',
                message:res.message
              })
            }
          }else {
            console.log("验证失败")
          }
        })

      },


      handleDelete(index,row){
        this.ids=[];
        if(row){
          this.ids.push(row.id)
        }else {
          this.ids = this.multipleSelection.map(m => m.id)
        }
        this.$confirm(`是否真的要删除学号为${this.ids}的学生吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let _this=this
          orderapi.deleteorder(this.ids)
              .then(({data:res})=>{
                console.log("res:",res)
                if (res.code === 200) {
                  this.$message({
                    type: 'success',
                    message: res.message,
                    onClose: () => {
                      // 重新加载数据
                      _this.search()
                    }
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: res.message
                  })
                }
              })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      handleEdit(index,row){
        this.title='修改员工信息'
        this.order=row
        this.dialogFormVisible=true

        console.log(index,row)
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(this.multipleSelection)
      },




      handleSizeChange(val) {
        this.pageSize=val
        // this.findByPage()
        this.search()
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page=val
        // this.findByPage()
        this.search()
        console.log(`当前页: ${val}`);
      },


    }
  }

</script>

<style>
.el-pagination{
  margin-top: 20px;
  text-align: right;
}



</style>